<%--
  Created by IntelliJ IDEA.
  User: 龚泽文
  Date: 2021/11/2
  Time: 9:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style>
        #Search{
            position: relative;
        }
        #searchAllName{
            position: absolute;
            right: 163px;
            top: 51px;
        }
        #searchAllName ul{
            margin: 0;
        }
        #searchAllName ul li{
            list-style: none;
            border: 2px solid black;
            border-bottom: none;
            height: 30px;
            width: 150px;
            line-height: 30px;
            font-size: 14px;
            color: gray;
            background: #F7F7F7;
            cursor: pointer;
        }
        #searchAllName ul li:last-of-type{
            border-bottom: 2px solid black;
        }
        #searchAllName ul li a{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <img align="middle"  src="images/separator.gif" />
            <c:if test="${sessionScope.account==null}">
                <a href="signonForm">Sign In</a>
            </c:if>
            <c:if test="${sessionScope.account!=null}">
                <a href="signout" >Sign Out</a>
            </c:if>
            <img align="middle" src="images/separator.gif" />
            <a href="editAccountForm?">My Account</a>
            <img align="middle" src="images/separator.gif" />
            <a href="help.html">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="${pageContext.request.contextPath}/viewItem" method="get">
                <input type="text" name="productId" size="14" />
                <input type="submit" name="searchProducts" value="Search" />
            </form>
        </div>
        <div id="searchAllName">
            <ul id="ul">

            </ul>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>
<script src="/js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        var products;
        $.ajax({
            url:"${pageContext.request.contextPath}/searchProduct?opr=getAllProduct",
            type:"post",
            dataType:"json",
            success:function (resp) {
                products = resp
            }
        })
        $('[name=productId]').keyup(function () {
            cl()
        })

        $('[name=productId]').focus(function () {
            cl()
        })
        //检索
        function cl(){
            $('#ul').html("")
            var productId = $('[name=productId]').val()
            if(productId == ""){
                $('#ul').html("")
                return
            }
            for (let i = 0; i < products.length; i++) {
                if($('#ul li').length == 10){
                    return;
                }
                var name = products[i].name
                var nameArr = name.split(productId)
                var index = name.indexOf(productId)
                var str = ""
                if(index!=-1){
                    for (let j = 0; j < nameArr.length; j++) {
                        str += nameArr[j]
                        if(j != nameArr.length-1){
                            str += "<span style='font-weight: 600;color: black'>" + productId + "</span>"
                        }

                    }
                    $('#ul').append("<li id='li' ><a href='${pageContext.request.contextPath}/viewItem?productId="+products[i].productId+"'>"+str+"</a></li>")
                }
            }
        }
        $('[name=productId]').blur(function () {
            $('#ul').hide()
        }).focus(function () {
            $('[name=productId]').bind("blur")
            $('#ul').show()
        })
        $('#searchAllName').mouseover(function () {
            $('[name=productId]').unbind("blur")
            $('#ul').show()
        })

        $('#ul').on("mouseover","#li",function () {
            $(this).siblings().css("background","#F7F7F7")
            $(this).css("background","#E6E6E6")
        })


    })
</script>
</body>
